<!--
 * @Author: hu_binbin
 * @Date: 2021-08-06 09:29:24
 * @LastEditTime: 2021-08-16 19:36:52
 * @Description: 
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" />
			</template>
			<template slot="header_icon">
				<van-image class="imgSize" width="34" height="47" @click="rfidBtn" :src="icon.rfid" />
				<van-image class="imgSize" width="44" height="44" @click="scanBtn" :src="icon.scan" />
			</template>
		</Theader>

		<!-- 搜索区域 -->
		<van-row  class="search_header" type="flex" justify='space-around'>
			<van-search v-model.trim="taskName" clearable @input="focus" shape="round" background="#F5F6FA" placeholder="搜索变电站">
			</van-search> 
		</van-row>

		<!-- 设备区域 -->
		<div class="doc-wrapper">
			<van-tabs v-model="active" color="#0EB295" title-active-color="#0EB295" animated swipeable>
				<van-tab title="设备间隔"></van-tab>
				<van-tab title="设备类型"></van-tab>
			</van-tabs>
			<van-collapse v-model="activeNames">
                <van-collapse-item :border="false" v-for="(deviList,index) in showDeviceList" :key="index" :title="deviList.bayName" :name="deviList.bayId" value-class="red">
					<van-cell class="col-item" :border="false" v-for="(device,i) in deviList.deviceList" :key="i" :title="device.deviceName">
						<template slot="default">
							<van-button size="mini" style="width: 3rem;" color="#0EB295" type="info" @click="showMenu(device)">操作</van-button>
						</template>
					</van-cell>
                </van-collapse-item>
            </van-collapse>
		</div>

		<van-popup round v-model="showPicker" position="bottom" @close="showPicker=false">
			<template>
				<van-grid :column-num="4" :border="false">
                    <van-grid-item v-for="(value,index) in gridData" :key="index" @click="gradeItemClick(value)">
                       <van-image :src="value.src" width="40" height="40"/>
                       <span v-text="value.text" class="font14"></span>
                    </van-grid-item>
				</van-grid>
				<div class="cross" @click="showPicker=false">
					<van-icon size="25" name="cross"/>
				</div>
			</template>
		</van-popup>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "exeTask",
		components:{
			Theader
		},
		data() {
			return {
				title: "巡视",
				active: 0,
				activeNames:[],
				icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
				},
				showPicker: false,
				taskName: "",//任务名称
				showDeviceList:[
					{
						bayName: "1号主变",
						bayId: "111",
						deviceList: [
							{
								deviceId: "1111",
								deviceName: "1号主变 A项",
							},
							{
								deviceId: "1112",
								deviceName: "1号主变 B项",
							},
						]
					},
					{
						bayName: "3号主变",
						bayId: "222",
						deviceList: [
							{
								deviceId: "2221",
								deviceName: "1号主变 A项",
							},
							{
								deviceId: "2222",
								deviceName: "1号主变 B项",
							},
						]
					},
				],
				gridData:[
					{"text":"抄录数据","src":require("../../../../assets/tour/chaolu.png"),"path":"/copyData"},
					{"text":"作业卡","src":require("../../../../assets/tour/workCard.png"),"path":"/workCard"},
					{"text":"登记缺陷","src":require("../../../../assets/tour/addDefect.png"),"path":"/AddDefect"},
					{"text":"登记隐患","src":require("../../../../assets/tour/addDanger.png"),"path":"/AddHiddenDanger"},
					{"text":"台账查询","src":require("../../../../assets/tour/deviceTab.png"),"path":"/deviceTab"},
					{"text":"履历查询","src":require("../../../../assets/tour/luli.png"),"path":"/luli"}],
				}
		},
		computed: {

		},
		methods: {
			onRefresh() {

			},
			onLoad() {
				
			},
			screen() {

			},
			addTask() {
				
			},
			excuteBtn() {
				this.$router.push({
					name: "exeTask",
				})
			},
			showMenu() {
				this.showPicker = true;
			},
			scanBtn() {

			},
			rfidBtn() {
				
			},
			focus() {
				
			}
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
	.search_header{
		margin-top: 45px;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
		width: 100%;
		border-radius: 0.6rem;
	}
	.doc-wrapper{
		overflow: auto;
		height: calc(100% - 212px);
		margin: 0.2rem;
	}
	/deep/ .van-collapse-item{
		font-size: 0.94rem;
		font-weight: bold;
	}
	.col-item{
		font-size: 0.8125rem;
		color:#666;
		font-weight: normal;
		padding: 5px 16px;
	}
	.cross{
		text-align: center; margin-bottom: 1rem;margin-top: 1rem;
	}
</style>